<template>
  <div class="editAgent">
    <el-form ref="editRoleForm" v-loading="editAgentLoading" :model="editRoleForm" :rules="editRoleRules" label-width="100px" class="editAgentCls">
      <el-form-item label="角色名称：" prop="roleName">
        <el-input v-model="editRoleForm.roleName" placeholder="请输入角色名称" size="small" clearable />
      </el-form-item>
      <el-form-item label="角色说明：" prop="rules">
        <el-input v-model="editRoleForm.rules" placeholder="请输入角色说明" size="small" clearable />
      </el-form-item>
      <el-form-item label="角色状态：" props="status" class="specType">
          <el-radio-group v-model="editRoleForm.status">
            <!-- <el-radio :label="-1" class="radio">所有</el-radio> -->
            <el-radio :label="0" >可用</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      <div class="subBtnWid">
        <el-button size="small" type="primary" :loading="loadingBtn" @click="subRoles('editRoleForm')">提交</el-button>
      </div>
      <div class="subBtnWid">
        <el-button size="small" @click="subClone('editRoleForm')">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  postRoleListApi,putEditRoleApi,getAppointRoleInfoApi
} from '@/api/system'

export default {
  name: 'Index',
  props: {
    editId: {
      type: [String, Number],
    },
    isEdit: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      editRoleForm: {
        roleName: '',
        rules: '',
        status: 0,
      },
      refAgentId: 0,
      editRoleRules: {
        roleName: [
          { required: true, message: '请输入角色说明', trigger: 'change' }
        ],
        rules: [
          { required: true, message: '请选择角色说明', trigger: 'change' }
        ],
      },
      tableAgentRolesList: [],
      refAgentList: [],
      editAgentLoading: false,
      loadingBtn: false,
      level: 0,
      oldLevel: 0
    }
  },
  mounted() {
    if(this.editId != null){
      this.getRoles()
    }
    
  },
  methods: {
    /**
       * 关闭
       */
    subClone() {
      this.$emit('close')
    },
    /**
       * 提交
       */
    subRoles(formName) {
      console.log('formName',formName);
      this.$refs.editRoleForm.validate((valid) => {
        if (valid) {
          if (this.isEdit == 1) {
            this.$set(this, 'loadingBtn', true)
            putEditRoleApi(this.editRoleForm,this.editId).then(() => {
              this.$message.success('编辑成功')
              this.$emit('getPersonnelList')
              this.$emit('close')
              this.$set(this, 'loadingBtn', false)
            }).catch(() => {
              this.$set(this, 'loadingBtn', false)
            })
          } else {
            this.$set(this, 'loadingBtn', true)
            console.log("editRoleForm>>>>>>",this.editRoleForm);
            postRoleListApi(this.editRoleForm).then(() => {
              this.$message.success('添加成功')
              this.$emit('getPersonnelList')
              this.$emit('close')
              this.$set(this, 'loadingBtn', false)
            }).catch(() => {
              this.$set(this, 'loadingBtn', false)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
    })
    },

    /**
       * 获取角色信息
       */
    getRoles() {
      getAppointRoleInfoApi(this.editId).then(res => {
        console.log("editRoleForm》》》",res);
        this.$set(this, 'editRoleForm', res)
      }).catch(() => {
        this.$set(this, 'editRoleForm', {})
        this.$set(this, 'editAgentLoading', false)
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
  .el-dialog.agentUserDialogCls {
    max-width: 1000px;
  }
</style>
